<template>
    <div class="withdraw_deposit">
        <div class="ls-card">
            <!-- 提示 -->
            <el-alert
                title="温馨提示：设置钱包可提现金额的提现方式，可提现金额来源于各类佣金奖励。"
                type="info"
                :closable="false"
                show-icon
            />
        </div>
        <el-form ref="formRef" :model="form" :rules="formRules" label-width="120px" size="small">
            <!-- 店铺信息 -->
            <div class="ls-card m-t-16">
                <div class="card-title">提现设置</div>
                <div class="card-content m-t-24">
                    <el-form-item label="提现方法" prop="withdraw_way" required>
                        <!-- 多选框 -->
                        <el-checkbox-group v-model="form.withdraw_way">
                            <el-checkbox label="1">账户余额(默认)</el-checkbox>
                            <el-checkbox label="2">微信零钱</el-checkbox>
                            <el-checkbox label="4">微信收款码</el-checkbox>
                            <el-checkbox label="5">支付宝收款码</el-checkbox>
                            <el-checkbox label="3">银行卡</el-checkbox>
                            <el-checkbox label="6">支付宝零钱</el-checkbox>
                        </el-checkbox-group>
                        <div class="muted xs">默认需要保留至少一种提现方法</div>
                    </el-form-item>
                    <el-form-item label="是否开启提现" prop="is_open" required>
                        <el-radio-group class="m-r-16" v-model="form.is_open">
                            <el-radio :label="1">是</el-radio>
                            <el-radio :label="0">否</el-radio>
                        </el-radio-group>
                        <div class="muted xs"></div>
                    </el-form-item>
                    <el-form-item label="微信零钱接口" prop="transfer_way" required>
                        <el-radio-group class="m-r-16" v-model="form.transfer_way">
                            <el-radio :label="1">企业付款到零钱</el-radio>
                            <el-radio :label="2">商家转账到零钱</el-radio>
                        </el-radio-group>
                        <div class="muted xs">选择商家转账到零钱时，运营账户必须有钱才能提现</div>
                    </el-form-item>
                    <el-form-item label="最低提现金额" prop="withdraw_min_money" required>
                        <el-input class="ls-input" placeholder="请输入金额" v-model="form.withdraw_min_money">
                            <template slot="append">元</template>
                        </el-input>
                        <div class="muted xs">会员提现需满足最低提现金额。才能提交提现申请。</div>
                    </el-form-item>
                    <el-form-item label="最高提现金额" required>
                        <el-input class="ls-input" placeholder="请输入金额" v-model="form.withdraw_max_money">
                            <template slot="append">元</template>
                        </el-input>
                        <div class="muted xs">会员提现允许的最高提现金额。</div>
                    </el-form-item>
                    <el-form-item label="提现手续费" required>
                        <el-input
                            class="ls-input"
                            placeholder="请输入提现手续费"
                            v-model="form.withdraw_service_charge"
                        >
                            <template slot="append">%</template>
                        </el-input>
                        <div class="muted xs">会员提现时收取的手续费占比。</div>
                    </el-form-item>

                    <!-- <el-form-item label="提现分红比例" prop="withdraw_dividend" required>
                        <el-input class="ls-input" placeholder="请输入提现分红比例" v-model="form.withdraw_dividend">
                            <template slot="append">%</template>
                        </el-input>
                        <div class="muted xs"></div>
                    </el-form-item>

                    <el-form-item label="提现分红人数" prop="withdraw_dividend_num" required>
                        <el-input class="ls-input" placeholder="请输入提现分红人数" v-model="form.withdraw_dividend_num">
                        </el-input>
                        <div class="muted xs"></div>
                    </el-form-item> -->

                    <el-form-item label="每日提现次数" prop="day_num" required>
                        <el-input class="ls-input" placeholder="请输入每日提现次数" v-model="form.day_num"> </el-input>
                        <div class="muted xs"></div>
                    </el-form-item>

                    <el-form-item label="提现周期" prop="withdraw_way" required>
                        <el-checkbox-group v-model="form.withdraw_week">
                            <el-checkbox :label="week.key" v-for="(week, index) in withdraw_week">
                                {{ week.label }}
                            </el-checkbox>
                        </el-checkbox-group>
                        <div class="muted xs">默认需要保留至少一种提现周期</div>
                    </el-form-item>

                    <!-- start 开放时间 后台是一个字段，在ui体现 上，应该给他两个字段。 一个开始，一个结束。 -->
                    <el-form-item label="开始时间" prop="time_open">
                        <el-time-select
                            placeholder="起始时间"
                            v-model="form.start_time_open"
                            format="H"
                            :picker-options="{
                                start: '00:00',
                                step: '01:00',
                                end: '23:00'
                            }"
                            @change="startTimeOpenChangeHandler"
                        >
                        </el-time-select>
                        <el-time-select
                            style="margin-left: 10px"
                            placeholder="结束时间"
                            v-model="form.end_time_open"
                            format="H"
                            :picker-options="{
                                start: '00:00',
                                step: '01:00',
                                end: '24:00',
                                minTime: form.start_time_open
                            }"
                            @change="endTimeOpenChangeHandler"
                        >
                        </el-time-select>

                        <div class="muted xs">如果起始时间大于结束时间，结束时间将自动往后推一个小时</div>
                    </el-form-item>
                    <!-- end 开放时间 -->

                    <!-- S notice_mobile -->
                    <el-form-item label="提现通知手机号" prop="notice_mobile" required>
                        <el-input class="ls-input" placeholder="请输入提现通知手机号" v-model="form.notice_mobile">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="提现说明" prop="withdraw_remark" required>
                        <el-input class="ls-input" placeholder="提现说明" v-model="form.withdraw_remark"> </el-input>
                    </el-form-item>
                    <!-- E notice_mobile -->
                </div>
            </div>
        </el-form>
        <!--  表单功能键  -->
        <div class="bg-white ls-fixed-footer">
            <div class="row-center flex" style="height: 100%">
                <!-- <el-button size="small" @click="$router.go(-1)">取消</el-button> -->
                <el-button size="small" type="primary" @click="setWithdrawDeposit()">保存</el-button>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator'

import { apiWithdrawConfig, apiWithdrawConfigSet } from '@/api/setting/user'
import { timeFormat } from '@/utils/util'

@Component({
    components: {}
})
export default class WithdrawDeposit extends Vue {
    /** S Data **/
    withdraw_week = [
        {
            key: '1',
            label: '星期一'
        },
        {
            key: '2',
            label: '星期二'
        },
        {
            key: '3',
            label: '星期三'
        },
        {
            key: '4',
            label: '星期四'
        },
        {
            key: '5',
            label: '星期五'
        },
        {
            key: '6',
            label: '星期六'
        },
        {
            key: '0',
            label: '星期天'
        }
    ]
    form = {
        withdraw_way: [], // 提现方式：1-钱包余额；2-微信零钱；3-银行卡；4-微信收款码；5-支付宝收款码
        withdraw_min_money: 0, // 最低提现金额
        withdraw_max_money: 0, // 最高提现金额
        withdraw_service_charge: 0, // 提现手续费
        scene: 'withdraw', // 场景：user-用户设置；register-注册设置；withdraw-提现设置
        transfer_way: 1, // 微信零钱接口:1-企业付款到零钱;2-商家转账到零钱
        is_open: 1, // 是否开启提现；1=是；0=否
        withdraw_week: [1, 2, 3, 4, 5], // 开启提现周期;1-6对应周一至周六；0=周日
        time_open: '', // 每天开放时间；24小时制,例如晚上九点请写21；开始时间和结束时间用,隔开,
        start_time_open: '00:00', // 开始时间 提交时，需要删除
        end_time_open: '24:00', // 结束时间，提交时，需要删除
        withdraw_dividend: '2', // 提现分红比例
        withdraw_dividend_num: '10', // 提现分红人数,
        day_num: '3', // 每日提现次数
        notice_mobile: '', // 提现通知手机号，多个用|隔开
        withdraw_remark: '' // 提现通知手机号，多个用|隔开
    }
    notice_mobiles = []
    // 预校验
    formRules = {
        withdraw_way: [
            {
                type: 'array',
                required: true,
                message: '默认需要保留至少一种提现方法',
                trigger: 'change'
            }
        ]
    }
    $refs!: { formRef: any }
    /** E Data **/

    // 获取用户提现设置
    getWithdrawDeposit() {
        apiWithdrawConfig()
            .then((res: any) => {
                // this.$message.success('数据请求成功!')
                this.form = Object.assign({}, this.form, res, {})
                this.setStartAndEndTime(res.time_open)
                this.notice_mobiles = (res.notice_mobile && res.notice_mobile.join('|')) || []
            })
            .catch(() => {
                // this.$message.error('数据请求失败!')
            })
    }

    // 修改用户提现设置
    setWithdrawDeposit() {
        this.form.scene = 'withdraw' // 场景：user-用户设置；register-注册设置；withdraw-提现设置
        this.form.withdraw_min_money = Number(this.form.withdraw_min_money)

        this.$refs.formRef.validate((valid: any) => {
            // 预校验
            if (!valid) {
                return
            }
            const config = JSON.parse(JSON.stringify(this.form))
            delete config.end_time_open
            delete config.start_time_open
            apiWithdrawConfigSet(config)
                .then((res: any) => {
                    setTimeout(() => {
                        this.getWithdrawDeposit()
                    }, 50)
                })
                .catch(() => {
                    // this.$message.error('保存失败!')
                })
        })
    }
    setStartAndEndTime(v: string) {
        if (!v || typeof v !== 'string' || !v.includes(',')) {
            return
        }
        const times = v.split(',')

        this.form.start_time_open = this.timeFormat(times[0])
        this.form.end_time_open = this.timeFormat(times[1])
    }
    // 开始 时间发生变化时，需要检测结束时间，如果结束时间小于开始时间，那就让结束时间往后推一个小时
    startTimeOpenChangeHandler() {
        // 需要一个时间格式化的工具, 转换为 数值
        const startTimeH = this.timeNumberFormat(this.form.start_time_open)
        let endTimeH = this.timeNumberFormat(this.form.end_time_open)

        if (startTimeH >= endTimeH) {
            endTimeH = startTimeH + 1
        }
        //
        this.form.end_time_open = this.timeFormat(endTimeH)

        this.form.time_open = `${startTimeH},${endTimeH}`
    }
    endTimeOpenChangeHandler() {
        const startTimeH = this.timeNumberFormat(this.form.start_time_open)
        const endTimeH = this.timeNumberFormat(this.form.end_time_open)
        this.form.time_open = `${startTimeH},${endTimeH}`
    }

    /**
     * 返回一个 hh:mm 的时间格式
     * @param v 可能是一个数字，也可能是一个字符串
     */
    timeFormat(v: number | string) {
        let newVal = String(v)
        if (newVal.length === 2) {
            return `${newVal}:00`
        } else if (newVal.length === 1) {
            return `0${newVal}:00`
        }
        // 这里其实还可以细分的
        return newVal
    }
    timeNumberFormat(v: string | number) {
        // 时间格式可能是一个 00:00,
        // 时间格式可能是一个 00:00, 也有可能是一个 数字
        // 所以，这里直接转换成一个 hh:mm 格式的字符串，再转换成数字格式的值。
        const newVal = this.timeFormat(v)
        return newVal ? Number(newVal.split(':')[0].replace(/0/i, '')) : 0
    }

    /** S Life Cycle **/
    created() {
        this.getWithdrawDeposit()
    }
    /** E Life Cycle **/
}
</script>

<style scoped lang="scss">
.ls-card {
    .ls-input {
        width: 240px;
    }

    .card-title {
        font-size: 14px;
        font-weight: 500;
    }

    .login_limit-unit {
        display: inline-block;
        width: 2em;
        text-align: center;
    }
}

.el-input {
    width: 240px;
}

.withdraw_deposit {
    min-height: calc(100vh - #{$--header-height} - 92px);
    margin-bottom: 60px;
}
</style>
